<template>
  <div class="dashboard-editor-container">
    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row class="dashboard-num-class" style="margin-top: 20px">
      <el-col :span="12">
        <div class="grid-content bg-purple line">
          <div id="user" :style="{ width: '100%', height: '300px' }" v-if="lineInfo"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light line">
          <div id="money" :style="{ width: '100%', height: '300px' }" v-if="lineInfo"></div>
        </div>
      </el-col>
    </el-row>

    <el-row v-loading="loading">
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-cpu"></i> CPU</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
                <th class="el-table__cell is-leaf"><div class="cell">值</div></th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">核心数</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">用户使用率</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-tickets"></i> 内存</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
                <th class="el-table__cell is-leaf"><div class="cell">内存</div></th>
                <th class="el-table__cell is-leaf"><div class="cell">JVM</div></th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">总内存</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">使用率</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span><i class="el-icon-monitor"></i> 服务器信息</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <tbody>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">服务器名称</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">操作系统</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">服务器IP</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">系统架构</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span><i class="el-icon-coffee-cup"></i> Java虚拟机信息</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;table-layout:fixed;">
              <tbody>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">Java名称</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">Java版本</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">启动时间</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">运行时长</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
              </tr>
              <tr>
                <td colspan="1" class="el-table__cell is-leaf"><div class="cell">安装路径</div></td>
                <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
              </tr>
              <tr>
                <td colspan="1" class="el-table__cell is-leaf"><div class="cell">项目路径</div></td>
                <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
              </tr>
              <tr>
                <td colspan="1" class="el-table__cell is-leaf"><div class="cell">运行参数</div></td>
                <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div></td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span><i class="el-icon-receiving"></i> 磁盘状态</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="el-table__cell el-table__cell is-leaf"><div class="cell">盘符路径</div></th>
                <th class="el-table__cell is-leaf"><div class="cell">文件系统</div></th>
                <th class="el-table__cell is-leaf"><div class="cell">盘符类型</div></th>
                <th class="el-table__cell is-leaf"><div class="cell">总大小</div></th>
                <th class="el-table__cell is-leaf"><div class="cell">可用大小</div></th>
                <th class="el-table__cell is-leaf"><div class="cell">已用大小</div></th>
                <th class="el-table__cell is-leaf"><div class="cell">已用百分比</div></th>
              </tr>
              </thead>
              <tbody v-if="server.sysFiles">
              <tr v-for="(sysFile, index) in server.sysFiles" :key="index">
                <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.dirName }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.sysTypeName }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.typeName }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.total }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.free }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.used }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import { getSystemRangeStatisticsInfo, getSystemLineInfo } from '@/api/dashboard'
import { getServer } from '@/api/monitor'
import * as echarts from 'echarts';

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup
  },
  data() {
    return {
      // 服务器信息
      server: [],
      loading: true,
      lineInfo: {}
    }
  },
  mounted() {
    this.getList()
    this.initData()
  },
  methods: {
    /** 查询服务器信息 */
    getList() {
      this.loading = true
      getServer().then(response => {
        this.loading = false
        this.server = response.data
      });
    },
    getDataInfo() {
      getSystemRangeStatisticsInfo().then(res => {
        const { data: { weekList }} = res
        this.dataInfo = res.data
        this.weekList = weekList
        const d = res.data.lineData
        this.lineData = d
        this.$nextTick(() => {
          this.lineChartData = d.newUserInfo
        })
      })
    },
    handleSetLineChartData(type) {
      this.lineChartData = this.lineData[type]
    },

    initData(){
      getSystemLineInfo().then(res => {
        this.lineInfo = res.data
        this.$nextTick(() => {
          this.randerUserLine(res.data)
          this.randerMoneyLine(res.data)
        })
      })
    },

    randerUserLine(info){
      const that = this;
      var chartDom = document.getElementById('user');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '用户注册折线图', // 主标题文本
          subtext: '用户7日内注册人数统计',
          left: 'center', // 标题水平位置
          textStyle: { // 主标题样式
            color: 'black'
          }
        },
        xAxis: {
          type: 'category',
          data: info.weekList
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          show: true,
          formatter: '{b} : {c}人 <br/>'
        },
        series: [
          {
            data: info.registerUserCountList,
            type: 'line',
            smooth: true,
            // 设置折线颜色
            lineStyle: {
              color: '#46a6ff', // 折线颜色
              width: 2, // 折线宽度
            },
            // 设置折线拐点标志的颜色
            itemStyle: {
              color: 'red' // 拐点标志颜色
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },


    randerMoneyLine(info){
      var chartDom = document.getElementById('money');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '收益折线图', // 主标题文本
          subtext: '7日内收益统计',
          left: 'center', // 标题水平位置
          textStyle: { // 主标题样式
            color: 'black'
          }
        },
        xAxis: {
          type: 'category',
          data: info.weekList
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          show: true,
          formatter: '{b} : 收益:{c}元 <br/>'
        },
        series: [
          {
            data: info.orderMoneyList,
            type: 'line',
            smooth: true,
            // 设置折线颜色
            lineStyle: {
              color: '#46a6ff', // 折线颜色
              width: 2, // 折线宽度
            },
            // 设置折线拐点标志的颜色
            itemStyle: {
              color: 'red' // 拐点标志颜色
            }
          }
        ]
      };

      option && myChart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.dashboard-num-class{
  margin-bottom: 20px;

  .line {
    width: 100%;
    padding: 10px;
    background: white !important;
  }


  .grid-content{
    padding: 20px;
    background-color: white;
    border-radius: 10px;

    .title{
      font-size: 14px;
    }
    .wenzi{
      text-align: center;
      height: 30px;
      line-height: 30px;
      color: #303133;
    }
    .num{
      font-size: 20px;
      //font-weight: 700;
    }
  }
}
</style>
